<style>
    .box-primary ul { margin: 0 10px; padding: 0; }
    .box-primary ul li { list-style: none; display: inline-block; }
    .box-primary li ul { margin: 0 30px; }
    .box-primary label { margin-left: 2px; font-weight: normal; }

    .game-item { display: block; border: 1px solid #e4e4e4; width: 100%; padding: 8px 12px; margin: 4px 0; border-radius: 2px; }
    .game-item .ck-div { display: inline-block; margin-left: 10px; }
    .game-item .ck-div>div { display: inline-block; }
    .game-item.on { border: 1px solid #3c8dbc; }
    .game-item .game-title { color: #000; }
    .game-item .game-title:hover { color: #3c8dbc; text-decoration: underline; }
    .game-item.on .game-title { color: #3c8dbc; text-decoration: none; }
    .game-item .fa { display: none; color: #3c8dbc; }
    .game-item.on .fa { display: inline-block; margin-right: 10px; }

    .tips { color: #ccc; font-size: 11px; }
</style>

<p>正在为 <b><{$user.UserName}>[<{$user.Account}>]</b> 设置游戏</p>

<div class="once-form box box-primary">
    <form method="post" action="/main/?r=user/grantGame">


        <table class="table">
            <tr>
                <td>
                    <h5>
                        所有游戏
                        <span class="tips">[拥有所有平台和游戏权限，选中这个就不需要选择下面的选项]</span>
                    </h5>
                    <div style="margin: 0 10px;">
                        <input id="ck-all_game" type="checkbox" name="all_game" value="on" <{if $user.HasAllGame == '1'}>checked<{/if}> />
                        <label for="ck-all_game">⬅️勾选此项拥有所有平台和游戏</label>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <h5>
                        平台选择
                        <span class="tips">[勾选平台则表示拥有该平台下的所有游戏]</span>
                    </h5>
                    <ul>
                        <{foreach from=$options['platform'] item=item}>
                        <li>
                            <input id="ck-pl-<{$item.PlatformID}>" class="checkbox-platform" name="platform[]" type="checkbox" value="<{$item.PlatformID}>" <{if in_array($item.PlatformID|cat:'-__ALL', $map)}>checked<{/if}>/>
                            <label for="ck-pl-<{$item.PlatformID}>"><{$item.PlatformName}></label>
                        </li>
                        <{/foreach}>
                    </ul>
                </td>
            </tr>
            <tr>
                <td>
                    <h5>
                        游戏选择
                        <span class="tips">[勾选游戏则表示拥有该游戏对应的所有平台，亦可以单独选中]</span>
                    </h5>
                    <ul>
                        <{foreach from=$options['game'] item=item}>
                        <li class="game-item<{if in_array('__ALL-'|cat:$item.id, $map)}> on<{/if}>">
                            <input type="checkbox" class="checkbox-game" name="game[<{$item.id}>][]" value="__ALL" style="display: none;" <{if in_array('__ALL-'|cat:$item.id, $map)}>checked<{/if}>/>
                            <i class="fa fa-check-square-o"></i>

                            <a href="javascript:;" class="game-title"><{$item.name}></a>

                            <div class="ck-div">
                                <{foreach from=$item.platform item=ii key=kk}>
                                <div>
                                    <input type="checkbox" class="checkbox-game-platform" id="ck-pl-<{$item.id}>-<{$kk}>" name="game[<{$item.id}>][]" value="<{$kk}>" <{if in_array('__ALL-'|cat:$item.id, $map)}>checked disabled<{elseif in_array($kk|cat:'-'|cat:$item.id, $map)}>checked<{/if}>/>
                                    <label for="ck-pl-<{$item.id}>-<{$kk}>"><{$ii}></label>
                                </div>
                                <{/foreach}>
                            </div>


                        </li>
                        <{/foreach}>
                    </ul>
                </td>
            </tr>
            <tr>
                <td>
                    <input type="hidden" name="id" value="<{$user.UserID}>" />
                    <input type="submit" id="save-btn" class="btn btn-primary" value='保存' />
                </td>
            </tr>
        </table>
    </form>
</div>

<script type="text/javascript">
    $(function(){

        $(".game-title").click(function(){
            var the = $(this).closest('.game-item');

            the.toggleClass('on');

            if(the.hasClass('on')){
                the.find('.checkbox-game').prop('checked', true);
                the.find('.checkbox-game-platform').addClass('game-on').not('.platform-on').prop({ 'checked':true, 'disabled':true });
            }else{
                the.find('.checkbox-game').prop('checked', false);
                the.find('.checkbox-game-platform').removeClass('game-on').not('.platform-on').prop({ 'checked':false, 'disabled':false });
            }
        });

        $(".checkbox-platform").change(function(){
            var value = $(this).val();

            if($(this).is(":checked")){
                $('.checkbox-game-platform[value="'+value+'"]').addClass('platform-on').not('.game-on').prop({ 'checked':true, 'disabled':true });
            }else{
                $('.checkbox-game-platform[value="'+value+'"]').removeClass('platform-on').not('.game-on').prop({ 'checked':false, 'disabled':false });
            }
        }).filter(':checked').change();

        $('.checkAll').click(function(){
            $(this).closest('div').next('ul').find('input[type="checkbox"]').prop('checked', true);
        });
        $('.checkNone').click(function(){
            $(this).closest('div').next('ul').find('input[type="checkbox"]').prop('checked', false);
        });
    });
</script>


